<template>
  <el-row class="container">
    <el-col :span="12">
      <el-row class="cm-mrgbt search_wrap">
        <el-input v-model="inputValue" placeholder="请输入曲线名称" class="search-input" @keyup.enter.native="doSearch">
        </el-input>
        <el-button type="primary" size="small" icon="el-icon-search" class="search-btn" @click="doSearch">搜索</el-button>
        <el-button v-if="isSearch" type="primary" size="small" icon="el-icon-delete" class="search-btn"
          @click="clearSearch">清空</el-button>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12" v-if="this.userListData.length > 0">
          <div class="santoker-rwap">
            <div>
              <el-row>
                <div class="user-name-wrap" :class="{ 'user-name-wrap-active': isAll }" @click="getAllChartList(1)">
                  全部
                </div>
              </el-row>
              <el-row v-for="(item, index) in this.userListData" :key="index">
                <div class="user-name-wrap" :class="{ 'user-name-wrap-active': userId == item.userId }"
                  @click="getChartList(item.userId, item.userName)" :data-id="item.userId">
                  {{ item.userName }}
                </div>
              </el-row>
            </div>
          </div>
        </el-col>
        <el-col :span="12" v-if="this.listData.length > 0">
          <div class="santoker-rwap">
            <el-row v-for="(item, index) in this.listData" :key="index">
              <div shadow="hover" class="mgb10 el-card__body"
                :class="{ 'user-name-wrap-active': index == listDataIndex }" v-if="
                  type == '001' ||
                  type == '002' ||
                  (type == '003' && item.selected == 1)
                " @click="getChartDetail(item.recordId, index)">
                <div class="santoker-data-rwap">
                  <input v-if="isBatch" type="checkbox" v-model="item.isSelect" />
                  <p>{{ item.title ? item.title : index }}</p>
                </div>
                <el-row class="set-data-wrap">
                  <p class="qrtype set-data-series">{{ item.type }}</p>
                  <el-button v-if="type == '001' && item.train == 0" class="set-data-btn" plain
                    @click.prevent="handleSetTrain(item,index)">设为训练集</el-button>
                  <el-button v-if="type == '001' && item.train == 1" class="set-data-btn" plain
                    @click.prevent="handleSetTrain(item,index)">删除训练集</el-button>
                  <el-button v-if="type == '002' && item.selected == 0" class="set-data-btn" type="primary"
                    icon="el-icon-edit" @click="handleSetSelected(item.recordId,index)">设为精选曲线</el-button>
                  <el-button v-if="
                      (type == '002' || type == '003') && item.selected == 1
                    " class="set-data-btn" type="primary" icon="el-icon-delete"
                    @click="handleCancleSelected(item.recordId,index)">取消精选曲线</el-button>
                </el-row>
              </div>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </el-col>
    <el-col :span="12">
      <el-row class="cm-mrgbt search_wrap" type="flex" justify="end">
        <el-button v-if="!isBatch" type="primary" size="small" icon="el-icon-s-operation" class="search-btn"
          @click="isBatch = true">批量操作</el-button>
        <el-button v-if="isBatch" size="small" icon="el-icon-close" class="search-btn" plain @click="isBatch = false">取消
        </el-button>
        <el-button v-if="isBatch && type != '003'" type="primary" size="small" icon="el-icon-edit" plain
          class="search-btn" @click="batchTrain('set_is_selected', 1)">设为精选曲线</el-button>
        <el-button v-if="isBatch && type == '003'" type="primary" size="small" icon="el-icon-edit" plain
          class="search-btn" @click="batchTrain('set_is_selected', 0)">取消精选曲线</el-button>
        <el-button v-if="isBatch && type != '002'" type="success" size="small" icon="el-icon-share" class="search-btn"
          plain @click="batchTrain('add_share', 1)">设为分享曲线</el-button>
        <el-button v-if="isBatch && type == '002'" type="success" size="small" icon="el-icon-share" class="search-btn"
          plain @click="batchTrain('add_share', 0)">删除分享曲线</el-button>
        <el-button v-if="isBatch" type="info" size="small" class="search-btn" plain
          @click="batchTrain('set_is_train', 1)">设为训练集</el-button>
        <el-button v-if="isBatch" type="info" size="small" class="search-btn" plain @click="batchDelete()">删除
        </el-button>
      </el-row>
      <el-card class="mgr20 echarts-wrap" v-show="isEcharts">
        <div class="echarts-btn-wrap" v-if="listData && listData.length > 0"></div>
        <div id="main" style="width: 100%; height: 600px"></div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
  export default {
    data() {
      return {
        isBatch: false,
        isAll: false,
        isSearch: false,
        serachType: "搜索曲线",
        isEcharts: false,
        listDataIndex: -1,
        userName: "",
        userId: "", //当前所选用户的id
        curId: "", //当前所选中曲线的编号
        inputValue: "",
        listData: [],
        userListData: [],
        data2: [], //曲线数值
        type: 0, //当前所选中曲线的类型
        ids: [],
        delIds: [],
        DEFAULT_VARIANCE: 5.0,
        DEFAULT_NOISE: 1.0,
        lastValue: 0,
        lastVariance: 0,
        initialized: false,
      };
    },
    watch: {
      userId(val) {
        this.isEcharts = false;
      },

      $route(to, from) {
        this.type = this.$route.query.type;
        this.userId = "";
        this.userName = "";
        this.curId = "";
        this.listData = []; //清空曲线列表
        this.listDataIndex = null;
        this.getUserList(this.$route.query.type);
      },
    },
    methods: {
      getAllChartList(tag) {
        if (tag == 1 && this.isAll) {
          return
        }
        this.isAll = true;
        this.userId = "";
        this.userName = "";
        let that = this;
        var api = "all_record";
        var par = {};
        var mot = "get";
        if (this.type == "002") {
          api = "get_record_list";
          par = {
            share: 1,
            // selected: null,
            // train:null,
            // userId:null,
          };
          mot = "post";
        }
        if (this.type == "003") {
          api = "get_record_list";
          par = {
            selected: 1,
            // share:null,
            // train:null,
            // userId:null,
          };
          mot = "post";
        }
        const loading = this.$loading({
          target: document.getElementsByClassName("container")[0],
          text: '数据加载中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.POST(false, api, par, mot, (result) => {
          loading.close()
          if (result.code == "A00001") {
            that.listData = result.data;
            // if(result.data && result.data.length > 0) {
            //   that.getChartList(result.data[0].userId, result.data[0].userName); //获取第一个客户的曲线列表
            // }
          }
        });
      },
      getUserList(type) {
        let that = this;
        let api = "";
        if (type == "001") {
          //重新获取用户列表
          api = "get_all_user_list";
        } else if (type == "002") {
          //重新获取拥有分享曲线的用户列表
          api = "get_user_list";
        } else if (type == "003") {
          //重新获取拥有精选曲线的用户列表
          api = "get_user_list_select";
        }
        this.POST(false, api, {}, "get", (result) => {
          if (result.code == "A00001") {
            that.userListData = result.data;
            // if(result.data && result.data.length > 0) {
            //   that.getChartList(result.data[0].userId, result.data[0].userName); //获取第一个客户的曲线列表
            // }
          }
        });
      },

      doSearch(e) {
        let that = this;
        let api;
        let param = {};
        let searchType;
        if (this.type == "001") {
          //普通
          searchType = 0;
        } else if (this.type == "002") {
          //分享
          searchType = 1;
        } else if (this.type == "003") {
          //精选
          searchType = 2;
        }

        if (this.serachType == "搜索用户") {
          this.clearData();
          api = "search_user_by_name";
          param = { userName: this.inputValue, searchType: searchType };
          this.searchUserList(this, api, param);
        } else {
          this.clearData();
          this.isSearch = true;
          api = "search_record";
          param = { title: this.inputValue, searchType: searchType };
          this.searchChartList(this, api, param);
        }
      },

      clearSearch() {
        this.inputValue = "";
        this.isSearch = false;
        this.clearData();
        this.getUserList(this.type);
      },

      clearData() {
        this.userId = "";
        this.userName = "";
        this.curId = "";
        this.listData = [];
        this.listDataIndex = null;
        this.userListData = [];
        this.isEcharts = false;
      },

      searchUserList(my, api, param) {
        this.POST(false, api, param, "get", (result) => {
          if (result.code == "A00001") {
            my.userListData = result.data;
          }
        });
      },

      searchChartList(my, api, param) {
        this.POST(false, api, param, "get", (result) => {
          if (result.code == "A00001" && result.data && result.data.length > 0) {
            my.curId = result.data[0].id;
            my.listData = result.data;
            my.listDataIndex = null;
          }
        });
      },

      getChartList(userId, userName) {
        this.isBatch = false;
        this.isAll = false;
        let that = this;
        that.userId = userId;
        that.userName = userName;
        let param = { userId: userId };
        let api = "";
        if (this.type == "001") {
          //获取用户所有的曲线列表
          api = "get_list";
        } else if (this.type == "002") {
          //获取分享曲线列表
          api = "get_share_list";
        } else if (this.type == "003") {
          //获取精选曲线列表
          api = "get_share_list";
        }
        const loading = this.$loading({
          target: document.getElementsByClassName("container")[0],
          text: '数据加载中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.POST(false, api, param, "get", (result) => {
          loading.close()
          if (result.code == "A00001") {
            that.listData = result.data;
            that.listDataIndex = null;
          }
        });
      },

      getChartDetail(id, index) {
        if (this.isBatch) {
          let list = this.listData;
          if (list[index].isSelect) {
            list[index].isSelect = false;
            var tag = this.ids.indexOf(list[index].recordId);
            this.ids.splice(tag, 1);
            let delIndex = this.delIds.findIndex(fruit => fruit.id === list[index].recordId)
            console.log(delIndex)
            this.delIds.splice(delIndex, 1);
          } else {
            list[index].isSelect = true;
            this.ids.push(list[index].recordId);
            this.delIds.push({
              id: list[index].recordId,
              userId: list[index].userId
            })
          }
          console.log(this.delIds)
          this.listData = list;
          this.$forceUpdate();
        } else {
        }
        this.curId = id;
        this.listDataIndex = index;
        this.isEcharts = true;
        this.getCurveData();
      },
      batchTrain(api, isSet) {
        if (this.ids.length == 0) {
          that.$message({
            message: "请选择曲线",
            type: "error",
            duration: 1000,
          });
          return;
        }
        let ids = this.ids;
        let that = this;
        var ps = [];
        for (var i = 0; i < ids.length; i++) {
          var param = {};
          if (api == "set_is_selected") {
            //精选
            param.selected = isSet;
          } else if (api == "set_is_train") {
            //训练集
            param.train = isSet;
          } else if (api == "add_share") {
            //分享
            param.share = isSet;
          }
          param.recordId = ids[i];
          ps.push(
            new Promise(function (resolve, reject) {
              that.POST(false, api, param, "post", (result) => {
                if (result.code == "A00001") {
                  resolve(i);
                }
              });
            })
          );
        }

        const loading = this.$loading({
          target: document.getElementsByClassName("container")[0],
          text: '数据加载中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        Promise.all(ps)
          .then(function (results) {
            loading.close()
            that.$message({
              message: "批量设置成功",
              type: "success",
              duration: 1000,
            });
            console.log("批量设置：", that.ids)
            var arr = that.listData.map(function (value, index, array) {
              for (var j = 0, l = that.ids.length; j < l; j++) {
                if (value.recordId == that.ids[j]) {
                  if (api == "set_is_selected") {
                    //精选
                    value.selected = isSet;
                  } else if (api == "set_is_train") {
                    //训练集
                    value.train = isSet;
                  } else if (api == "add_share") {
                    //分享
                    value.share = isSet;
                  }
                }
              }
              return value
            })
            if (that.type == "002" && api == "add_share" && isSet == 0) {
              arr = that.listData.filter(function (value, index, array) {
                return value.share == 1
              })
            }
            if (that.type == "003" && api == "set_is_selected" && isSet == 0) {
              arr = that.listData.filter(function (value, index, array) {
                return value.selected == 1
              })
            }
            if (arr.length == 0 && !that.isAll) {
              var tag = that.userListData.findIndex(fruit => fruit.userId === that.userId)
              that.userListData.splice(tag, 1)
            }
            that.listData = arr
            that.curId = "";
            // that.isBatch = false;
            // that.ids = [];
            // that.curId = "";
            // that.listData = []; //清空曲线列表，然后刷新
            // that.listDataIndex = null;
            // that.getAllChartList();
          })
          .catch(function (r) {
            loading.close()
            that.$message({
              message: "批量设置失败",
              type: "error",
              duration: 1000,
            });
          });
      },
      batchDelete() {
        let that = this;
        if (this.delIds.length == 0) {
          that.$message({
            message: "请选择曲线",
            type: "error",
            duration: 1000,
          });
          return;
        }
        let msg = "确定要将选中的曲线删除吗？";
        this.$confirm(msg, '提示', {
          type: 'warning'
        }).then((r) => { //请求接口进行设置操作
          let delIds = this.delIds;
          var ps = [];
          for (var i = 0; i < delIds.length; i++) {
            ps.push(
              new Promise(function (resolve, reject) {
                that.POST(false, "del_record", delIds[i], "post", (result) => {
                  if (result.code == "A00001") {
                    resolve(i);
                  }
                });
              })
            );
          }
          const loading = this.$loading({
            target: document.getElementsByClassName("container")[0],
            text: '数据加载中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          Promise.all(ps)
            .then(function (results) {
              loading.close()
              that.$message({
                message: "批量删除成功",
                type: "success",
                duration: 1000,
              });
              var arr = that.listData.filter(function (value, index, array) {
                let delIndex = that.delIds.findIndex(fruit => fruit.id === value.recordId)
                return delIndex == -1
              })
              that.ids = [];
              that.delIds = [];
              that.listData = arr
              // that.isBatch = false;
              // that.ids = [];
              // that.curId = "";
              // that.listData = []; //清空曲线列表，然后刷新
              // that.listDataIndex = null;
              // that.getAllChartList();
            })
            .catch(function (r) {
              loading.close()
              that.$message({
                message: "批量删除失败",
                type: "error",
                duration: 1000,
              });
            });
        }).catch(() => { });
      },
      handleSetTrain(item, index) {
        let that = this;
        // let msg =  item.train == 1 ? "确定要将该曲线移出训练集吗？" : '确定要将该曲线设置训练集吗？';
        //       this.$confirm(msg, '提示', {
        //           type: 'warning'
        //       }).then(() => { //请求接口进行设置操作

        //       }).catch(() => {});
        if (item.train) {
          let param = {
            recordId: item.recordId,
            train: 0,
          };
          that.POST(false, "set_is_train", param, "post", (result) => {
            if (result.code == "A00001") {
              that.$message({
                message: "删除成功",
                type: "success",
                duration: 1000,
              });
              var arr = that.listData
              arr[index].train = 0
              that.listData = arr
              // that.curId = "";
              // that.listData = []; //清空曲线列表，然后刷新
              // that.listDataIndex = null;
              // if (that.isAll) {
              //   that.getAllChartList();
              // } else {
              //   that.getChartList(that.userId, that.userName);
              // }
            }
          });
        } else {
          let param = {
            recordId: item.recordId,
            train: 1,
          };
          that.POST(false, "set_is_train", param, "post", (result) => {
            if (result.code == "A00001") {
              that.$message({
                message: "设置成功",
                type: "success",
                duration: 1000,
              });

              var arr = that.listData
              arr[index].train = 1
              that.listData = arr
              // that.curId = "";
              // that.listData = []; //清空曲线列表，然后刷新
              // that.listDataIndex = null;
              // if (that.isBatch) {
              //   that.getAllChartList();
              // } else {
              //   that.getChartList(that.userId, that.userName);
              // }
            }
          });
        }
      },

      handleSetSelected(id, index) {
        let that = this;
        // this.$confirm("确定要将该曲线设置为精选曲线吗？", "提示", {
        //   type: "warning",
        // })
        //   .then(() => {

        //   })
        //   .catch(() => {});
        //请求接口进行设置操作
        let param = {
          recordId: id,
          selected: 1,
        };
        that.POST(false, "set_is_selected", param, "post", (result) => {
          if (result.code == "A00001") {
            // that.$message.success('设置成功');
            that.$message({
              message: "设置成功",
              type: "success",
              duration: 1000,
            });
            var arr = that.listData
            arr[index].selected = 1
            that.listData = arr
            // that.curId = "";
            // that.listData = []; //清空曲线列表
            // that.listDataIndex = null;
            // if (that.isBatch) {
            //   that.getAllChartList();
            // } else {
            //   that.getChartList(that.userId, that.userName);
            // }
          }
        });
      },

      handleCancleSelected(id) {
        let that = this;
        // this.$confirm("确定要取消该该精选曲线设置吗？", "提示", {
        //   type: "warning",
        // })
        //   .then(() => {

        //   })
        //   .catch(() => {});
        //请求接口进行设置操作
        let param = {
          recordId: id,
          selected: 0,
        };
        that.POST(false, "set_is_selected", param, "post", (result) => {
          if (result.code == "A00001") {
            that.$message({
              message: "取消成功",
              type: "success",
              duration: 1000,
            });
            let len = 0;
            that.listData.map((item) => {
              if (item.selected == 1) {
                //精选曲线数量
                len = len + 1;
              }
            });
            if (len == 1) {
              //只有一条精选曲线，撤销后需要更新用户列表
              that.userId = "";
              that.userName = "";
              that.curId = "";
              that.listData = []; //清空曲线列表
              that.listDataIndex = null;

              that.getUserList(that.type);
            } else {
              //有多条精选曲线，撤销后只需要更新曲线列表
              that.curId = "";
              that.listData = []; //清空曲线列表
              that.listDataIndex = null;
              if (that.isBatch) {
                that.getAllChartList();
              } else {
                that.getChartList(that.userId, that.userName);
              }
            }
          }
        });
      },
      getCurveData() {
        let param = {
          recordId: this.curId,
        };
        this.POST(false, "get_record", param, "get", (result) => {
          if (result.code == "A00001") {
            this.myEchartsAgin(result.data.data);
          }
        });
      },
      myEchartsAgin(detail) {
        let _this = this;
        var myChart = this.$echarts.init(document.getElementById("main"));
        //豆温
        var btData = detail.beanTemperatureArray;
        //风温
        var etData = detail.environmentTemperatureArray;
        for (var i = 0; i < etData.length; i++) {
          etData[i] = Number(etData[i]).toFixed(1);
        }
        //火力
        var firData = detail.firepowerArray;
        //风门
        var damData = detail.damperArray;
        //ror
        var ror = this.getRorDatas(btData, detail.timeArray);
        console.log("计算好的ror", ror);
        var rorData = this.getShowRorDatas(ror);
        console.log("平滑好的ror", rorData);
        //时间
        var timeData = this.getTimeDatas(detail.timeArray);
        //操作数组
        var events = detail.eventArray;

        var nbtData = this.getBtDatas(detail);
        let til = _this.userName ? "客户：" + _this.userName : "";
        let that = this;
        let option = {
          animation: false,
          title: {
            left: "center",
            text: til,
            subtext: "",
          },
          dataZoom: [
            {
              type: "inside",
              disabled: true,
              zoomLock: true,
            },
          ],
          tooltip: {
            trigger: "axis",
            alwaysShowContent: true,
            formatter: function (params, ticket, callback) {
              let eName = "";
              let name = params[0].name;
              if (params[0].dataIndex == btData.length - 2) {
                eName = "结束";
                name = that.dateFormat(
                  detail.timeArray[detail.timeArray.length - 1]
                );
              }
              for (var i = 0; i < events.length; i++) {
                let event = events[i];
                if (params[0].dataIndex == event.time) {
                  eName = that.getName(event.event);
                }
              }
              let fm = name + " " + eName + "<br />";

              for (var i = 0; i < params.length; i++) {
                fm += params[i].seriesName + "：" + params[i].value;
                if (i < params.length - 1) {
                  fm += "<br />";
                }
              }
              return fm;
            },
          },
          xAxis: {
            type: "category",
            splitLine: {
              show: true,
            },
            axisLabel: {
              interval: 59,
              showMaxLabel: true,
            },
            boundaryGap: true,
            data: timeData,
          },
          yAxis: [
            {
              id: 0,
              type: "value",
              axisTick: {
                inside: true,
              },
              splitLine: {
                show: true,
              },
              min: 0,
              max: 300,
            },
            {
              id: 1,
              type: "value",
              axisTick: {
                inside: true,
              },
              splitLine: {
                show: true,
              },
              min: 0,
              max: 120,
            },
          ],
          series: [
            {
              yAxisIndex: 0,
              name: "风温",
              type: "line",
              smooth: true,
              symbol: "circle",
              symbolSize: 1,
              sampling: "average",
              itemStyle: {
                color: "#2688eb",
              },
              stack: "a",
              areaStyle: {},
              data: etData,
            },
            {
              yAxisIndex: 0,
              name: "豆温",
              type: "line",
              smooth: true,
              stack: "b",
              symbol: "circle",
              symbolSize: 1,
              sampling: "average",
              itemStyle: {
                color: "#fb0c1a",
              },
              areaStyle: {},
              data: nbtData,
            },
            {
              yAxisIndex: 0,
              name: "火力",
              type: "line",
              smooth: true,
              symbol: "circle",
              symbolSize: 1,
              sampling: "average",
              itemStyle: {
                color: "#000000",
              },
              data: firData,
            },
            {
              yAxisIndex: 0,
              name: "风门",
              type: "line",
              smooth: true,
              symbol: "circle",
              symbolSize: 1,
              sampling: "average",
              itemStyle: {
                color: "#20c5cc",
              },
              data: damData,
            },
            {
              yAxisIndex: 1,
              name: "ROR",
              type: "line",
              smooth: true,
              symbol: "circle",
              symbolSize: 1,
              sampling: "average",
              itemStyle: {
                color: "#edc72c",
              },
              data: rorData,
            },
          ],
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      },
      getFM(detail, rorData) { },
      getBtDatas(detail) {
        //豆温
        var btData = detail.beanTemperatureArray;
        //风温
        // var etData = detail.environmentTemperatureArray;
        // //火力
        // var firData = detail.firepowerArray;
        // //风门
        // var damData = detail.damperArray;
        //时间
        var timeData = detail.timeArray;
        //操作数组
        var events = detail.eventArray;

        var datas = btData;

        for (var i = 0; i < timeData.length; i++) {
          let t = timeData[i];
          let bt = Number(btData[i]).toFixed(1);
          btData[i] = bt;
          for (var j = 0; j < events.length; j++) {
            let event = events[j];
            if (event.event != 5) {
              if (t == event.time) {
                datas[i] = {
                  value: bt,
                  symbolSize: 10,
                  showAllSymbol: true,
                };
              }
            }
          }
          if (i == timeData.length - 2) {
            datas[i] = {
              value: bt,
              symbolSize: 10,
              showAllSymbol: true,
            };
          }
        }
        return datas;
      },
      getName(type) {
        if (type == 1) {
          return "开始";
        } else if (type == 2) {
          return "转黄";
        } else if (type == 3) {
          return "一爆";
        } else if (type == 4) {
          return "二爆";
        } else {
          return "结束";
        }
      },
      getRorDatas(btData, timeArray) {
        var rorData = [];
        this.DEFAULT_VARIANCE = 5;
        this.DEFAULT_NOISE = 1;
        this.lastValue = 0;
        this.lastVariance = 0;
        this.initialized = false;
        for (var i = 1; i < btData.length; i++) {
          var t1 = timeArray[i];
          let t2 = timeArray[i - 1];
          if (t1 == t2) {
            t1 += 1;
          }
          let ror = (btData[i] - btData[i - 1]) / (t1 - t2);
          // console.log("初始ror",ror)
          rorData.push(this.filter(ror));
        }
        this.smoothData(rorData, 9);
        this.smoothData(rorData, 7);
        this.smoothData(rorData, 5);
        this.smoothData(rorData, 3);
        return rorData;
      },
      smoothData(data, span) {
        if (data.length <= span * 2) {
          return data;
        }
        let length = data.length;
        let r = (span - 1) >> 1;
        for (var i = 1; i <= r; i++) {
          var v = data[i];
          for (var j = 1; j <= i; j++) {
            v += data[i + j] + data[i - j];
          }
          let mean = v / (i * 2 + 1);
          data[i] = mean;
        }
        var sum = data[r] * span;
        for (var i = r + 1; i < length - r; i++) {
          sum = sum - data[i - r - 1] + data[i + r];
          data[i] = sum / span;
        }

        for (var i = length - r; i < length; i++) {
          var v = data[i];
          for (var j = 1; i + j < length; j++) v += data[i + j] + data[i - j];
          var mean = v / ((length - i - 1) * 2 + 1);
          data[i] = mean;
        }
        return data;
      },
      filter(dBt) {
        if (!this.initialized) {
          this.lastValue = dBt;
          this.lastVariance = this.DEFAULT_VARIANCE;
          this.initialized = true;
          return dBt;
        }

        let expValue = this.lastValue;
        let expVariance = this.lastVariance + this.DEFAULT_NOISE;

        let k = expVariance / (expVariance + this.DEFAULT_VARIANCE);

        let value = expValue + k * (dBt - expValue);
        let variance = expVariance - k * this.DEFAULT_VARIANCE;

        this.lastValue = value;
        this.lastVariance = variance;
        return value;
      },
      getShowRorDatas(data) {
        var rorData = [];
        for (var i = 0; i < data.length; i++) {
          let n = Number(data[i] * 60);
          rorData.push(n.toFixed(1));
        }
        return rorData;
      },
      getShowDatas(data) {
        var rorData = [[0, 0]];
        for (var i = 0; i < data.length; i++) {
          if (i % 2 == 1 || i == data.length - 1) {
            rorData.push([i, data[i]]);
          }
        }
        return rorData;
      },
      getTimeDatas(datas) {
        var timeDatas = [];
        var cT = datas[datas.length - 1];
        var maxT = 601;
        while (cT > maxT) {
          maxT += 120;
        }
        for (var i = 0; i < maxT; i++) {
          timeDatas.push(this.dateFormat(i));
        }
        return timeDatas;
      },
      dateFormat(value) {
        var theTime = parseInt(value); // 秒
        var middle = 0; // 分
        if (theTime >= 60) {
          middle = parseInt(theTime / 60);
          theTime = parseInt(theTime % 60);
          if (middle >= 60) {
            middle = parseInt(middle % 60);
          }
        }
        var result = parseInt(theTime);
        if (result < 10) {
          result = "0" + result;
        }
        if (middle > 0) {
          result = "" + parseInt(middle) + ":" + result;
        } else {
          result = "00:" + result;
        }
        return result;
      },
    },
    mounted() {
      this.type = this.$route.query.type;
      this.getUserList(this.$route.query.type);
      // this.doSearch(this.userListData[0].id);
      // this.myEchartsAgin();
    },
  };
</script>
<style scoped>
  .content-title {
    clear: both;
    font-weight: 400;
    line-height: 50px;
    margin: 10px 0;
    font-size: 22px;
    color: #1f2f3d;
  }

  .container {
    background: #f0f0f0;
  }

  .left_wrap {
    flex: 1;
  }

  .el-card__body {
    padding: 10px;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    box-shadow: 3px 3px 3px #efefef;
  }

  .mgb10 {
    margin-bottom: 10px;
  }

  .mr10 {
    margin-right: 10px;
  }

  .user-name-wrap {
    min-height: 48px;
    line-height: 48px;
    border-bottom: 1px solid #e5e5ee;
    border-radius: 2px;
    padding: 0 10px;
    text-align: left;
    word-wrap: break-word;
  }

  .user-name-wrap-active {
    background: #f2f6fc;
  }

  .user-name {
    text-align: left;
  }

  .echarts {
    flex: 1.6;
    background: #ffffff;
    padding: 20px 75px;
    position: relative;
  }

  .cm-mrgbt {
    margin-bottom: 10px;
  }

  .santoker-rwap {
    overflow: scroll;
    height: 578px;
    background: #ffffff;
    padding: 10px;
  }

  .santoker-data-rwap {
    width: 100%;
    word-wrap: break-word;
    font-size: 14px;
  }

  .santoker-rwap .user-rwap-tip {
    text-align: center;
    margin-top: 125px;
  }

  .santoker-rwap .qrtype {
    margin-top: 15px;
    color: #606266;
    font-size: bold;
  }

  .center {
    text-align: center;
  }

  .search_wrap {
    display: flex;
  }

  .search_wrap .search-input {
    margin-right: 18px;
    /* flex: 4; */
    width: 275px;
  }

  .search_wrap .search-btn {
    /* flex: 1; */
    width: 125px;
  }

  .mgr20 {
    margin-left: 20px;
  }

  .mgbt20 {
    margin-bottom: 10px;
  }

  .echarts-wrap {
    margin-top: 40px;
    height: 600px;
    position: relative;
  }

  .echarts-btn-wrap {
    position: absolute;
    right: 10px;
    top: 20px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
  }

  .echarts-btn {
    width: 120px;
    margin-bottom: 10px;
  }

  .set-data-wrap {
    height: 40px;
    position: relative;
  }

  .set-data-wrap .set-data-series {
    display: inline-block;
    position: absolute;
    left: 10px;
    bottom: 10px;
  }

  .set-data-wrap .set-data-btn {
    position: absolute;
    right: 0;
    bottom: 6px;
  }
</style>